<!DOCTYPE html>
<html lang="en">

<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>

<body>
    <button onclick="openMedia()">开启摄像头</button>
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button onclick="takePhoto()">拍照</button>
    <img id="imgTag" src="" alt="imgTag">
    <button onclick="closeMedia()">关闭摄像头</button>

    <script>
        let mediaStreamTrack = null; // 视频对象(全局)
        let video;
        function openMedia() {
            let constraints = {
                video: { width: 500, height: 500 },
                audio: false
            };
            //获得video摄像头
            video = document.getElementById('video');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then((mediaStream) => {
                // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                mediaStreamTrack = mediaStream.getVideoTracks()
                video.srcObject = mediaStream;
                video.play();
            });
        }

        // 关闭摄像头
        function closeMedia() {
            let stream = document.getElementById('video').srcObject;
            let tracks = stream.getTracks();

            tracks.forEach(function (track) {
                track.stop();
            });

            document.getElementById('video').srcObject = null;
            document.getElementById('imgTag').src = null;
        }

        // 拍照
        function takePhoto() {
            //获得Canvas对象
            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 500, 500);


            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
            let img = document.getElementById('canvas').toDataURL();
            // 这里的img就是得到的图片
            console.log('img-----', img);
            document.getElementById('imgTag').src = img;
            //上传
            /*$.ajax({
                url: "/xxxx.do",
                type: "POST",
                data: {"imgData": img},
                success: function (data) {
                    console.log(data);
                    document.gauges.forEach(function (gauge) {
                        gauge.value = data.data
                    });
                },
                error: function () {
                    console.log("服务端异常！");
                }
            });*/
        }

        // Base64转flie
        function base64ToBlob(base64, mimeType) {
            // 移除开头的 data:mime/type;base64, 部分
            const byteString = atob(base64.split(',')[1]);
            const arrayBuffer = new ArrayBuffer(byteString.length);
            const uint8Array = new Uint8Array(arrayBuffer);

            // 将 Base64 字符串转为字节码
            for (let i = 0; i < byteString.length; i++) {
                uint8Array[i] = byteString.charCodeAt(i);
            }

            return new Blob([uint8Array], { type: mimeType });
        }
        function base64ToFile(base64, fileName, mimeType) {
            const blob = base64ToBlob(base64, mimeType);
            return new File([blob], fileName, { type: mimeType });
        }

        // const base64Data = '';
        // const file = base64ToFile(base64Data, 'uploaded-image.png');
        // console.log("🚀 ~ file:", file)




    </script>
</body>

</html>